<template>
  <el-dialog title="选择分组" :visible.sync="dialogData.isShow" width="35%">
    <el-form :inline="true" :model="searchParams" :rules="rules" ref="ruleForm">
      <el-form-item label="分组名称" prop="name">
        <el-input
          size="small"
          v-model="searchParams.name"
          placeholder="请您输入名称查询"
          maxlength="100"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="s-btn">
        <el-button type="success" icon="el-icon-search" @click="toSearch">
          查询
        </el-button>
        <el-button type="success" plain @click="resetForm('ruleForm')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" @row-click="getCurrentRow">
      <el-table-column width="30" align="center">
        <template slot-scope="{ row }">
          <el-radio
            :label="row.id"
            v-model="radio"
            @change.native="getCurrentRow(row)"
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        label="分组名称"
        prop="name"
        min-width="100"
        align="center"
      >
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="toSearch"
    ></pageCom>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="dialogData.isShow = false">
        取 消
      </el-button>
      <el-button type="success" @click="confirm">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getGroupUserList } from '@/api/activityCenter/activityManage/common'
export default {
  props: ['dialogData'],
  data() {
    return {
      total: 0,
      searchParams: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      radio: '',
      groupInfo: undefined,
      tableData: [],
      rules: { name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }] }
    }
  },
  methods: {
    /* 查询 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          getGroupUserList(this.searchParams, (res) => {
            this.tableData = res.rows
            this.total = res.total
          })
        }
      })
    },
    /* 选择礼品卡 */
    getCurrentRow(row) {
      this.radio = row.id
      this.groupInfo = row
    },
    /* 确认提交 */
    confirm() {
      if (!this.groupInfo) {
        this.$message.warning('请选择用户分组')
      } else {
        this.$emit('groupData', this.groupInfo)
        this.dialogData.isShow = false
      }
    },
    /* 重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.el-dialog) {
  margin: 5vh auto 0 !important;
}
:deep(.el-radio) {
  margin-left: 6px;
}
:deep(.el-radio .el-radio__label) {
  display: none;
}
</style>
